<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂的背景图案</title>
    <link rel="stylesheet" href="../public.css">
    <style>
        .box {
            width: 315px;
            height: 100px;
            margin: 20px auto;
        }

        .gridding {
            background: white;
            background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0),
                linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
            background-size: 30px 30px;
        }

        .gridding1 {
            background: #58a;
            background-image: linear-gradient(white 1px, transparent 0),
                linear-gradient(90deg, white 1px, transparent 0);
            background-size: 30px 30px;
        }

        .gridding2 {
            background: #58a;
            background-image: linear-gradient(white 2px, transparent 0),
                linear-gradient(90deg, white 2px, transparent 0),
                linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
                linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
            background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
        }

        .wavePoint {
            background: #655;
            background-image: radial-gradient(tan 30%, transparent 0);
            background-size: 30px 30px;
        }

        .wavePoint1 {
            background: #655;
            background-image: radial-gradient(tan 30%, transparent 0),
                radial-gradient(tan 30%, transparent 0);
            background-size: 30px 30px;
            background-position: 0 0, 15px 15px;
        }

        .chessboard {
            background: #eee;
            background-image: linear-gradient(45deg, transparent 75%, #bbb 0),
                linear-gradient(45deg, #bbb 25%, transparent 0),
                linear-gradient(45deg, transparent 75%, #bbb 0),
                linear-gradient(45deg, #bbb 25%, transparent 0);
            background-size: 30px 30px;
            background-position: 15px 15px, 0 0, 0 0, 15px 15px;
        }

        .chessboard1 {
            background: #eee;
            background-image: linear-gradient(45deg,
                    rgba(0, 0, 0, .25) 25%, transparent 0,
                    transparent 75%, rgba(0, 0, 0, .25) 0),
                linear-gradient(45deg,
                    rgba(0, 0, 0, .25) 25%, transparent 0,
                    transparent 75%, rgba(0, 0, 0, .25) 0);
            background-position: 0 0, 15px 15px;
            background-size: 30px 30px;
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>网格</h1>
        <ul>
            <li>将垂直和水平的条纹叠加起来，获得各种各样的网格</li>
        </ul>
        <div class="box gridding ">
        </div>
        <div class="box gridding1 ">
        </div>
        <div class="box gridding2 ">
        </div>
    </div>
    <div class="content">
        <h1>波点</h1>
        <ul>
            <li>通过径向渐变创建圆点阵列</li>
        </ul>
        <div class="box wavePoint  ">
        </div>
        <ul>
            <li>通过background-position: 0 0,15px 15px;将定位错开</li>
        </ul>
        <div class="box wavePoint1 ">
        </div>
    </div>
    <div class="content">
        <h1>棋盘</h1>
        <ul>
            <li>利用两个直角三角形拼合出想要的方块</li>
            <li>把第二层渐变在水平和垂直方向均移动贴片长度的一般，就可以拼合成一个完整的方块</li>
        </ul>
        <div class="box chessboard  ">
        </div>
        <ul>
            <li>只需要修改底色就可以改变整个棋盘的色调，不需要单独调整各层渐变的色标</li>
        </ul>
        <div class="box chessboard1  ">
        </div>
    </div>
</body>

</html>